<template>
  <el-row type="flex" justify="center">
    <el-col>
      <el-input type="text" v-model="searchKey"
                class="input-with-select"
                placeholder="请输入所需要查询的文章"
                style="margin-top: 10px;caret-color: black;width:60%"
                @keyup.enter.native="search">
        <el-select v-model="select" slot="prepend" placeholder="请选择" default-first-option>
          <el-option label="篇目名称" value="title"></el-option>
          <el-option label="作者" value="author"></el-option>
          <el-option label="发表会议" value="conference"></el-option>
          <el-option label="科研方向" value="direction"></el-option>
        </el-select>
        <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
      </el-input>
      <el-link type="primary" style="margin-left: 10px" @click="advanceVisible=true">高级搜索</el-link>
    </el-col>


    <!-- 高级搜索表单   -->
    <el-dialog title="高级搜索"
               :visible.sync="advanceVisible"
               @close="clear"
               width="50%">
      <el-form :model="searchForm">
        <el-form-item>
          <el-input type="text"
                    v-model="searchForm.searchKey"
                    style="margin-top: 10px;caret-color: black;"
                    @keyup.enter.native="advanceSearch"
                    placeholder="请输入论文名称">
            <template slot="prepend">内容</template>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-input type="text"
                    v-model="searchForm.author"
                    style="margin-top: 10px;caret-color: black;"
                    @keyup.enter.native="advanceSearch"
                    placeholder="请输入作者">
            <template slot="prepend">论文作者</template>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-input type="text"
                    v-model="searchForm.conference"
                    style="margin-top: 10px;caret-color: black;"
                    @keyup.enter.native="advanceSearch"
                    placeholder="请输入会议名称">
            <template slot="prepend">会议</template>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-input type="text"
                    v-model="searchForm.directionName"
                    style="margin-top: 10px;caret-color: black;"
                    @keyup.enter.native="advanceSearch"
                    placeholder="请输入方向名称">
            <template slot="prepend">方向</template>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-col :span="11">
            <el-date-picker type="date" placeholder="起始时间" v-model="searchForm.begin" style="width: 100%;"></el-date-picker>
          </el-col>
          <el-col class="line" :span="2">-</el-col>
          <el-col :span="11">
            <el-date-picker type="date" placeholder="终止时间" v-model="searchForm.end" style="width: 100%;"></el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="advanceSearch">提交</el-button>
          <el-button @click="clear">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </el-row>
</template>

<script>
export default {
  name: "SearchBar",
  inject:['reload'],
  data(){
    return{
      /*
       搜索相关
      */
      select:'title',
      searchKey:'',
      advanceVisible:false,
      searchForm: {
        searchKey:'',
        conference:'',
        author:'',
        directionName:'',
        begin:'',
        end:''
      },
    }
  },
  methods:{
    /*
       普通查询
      */
    search() {
      this.$router.push({
        name:'AdminResult',
        params:{
          select:this.select,
          key:this.searchKey,
        }
      }).then(()=>{
        this.reload()
      }).catch(()=>{
        this.reload()
      })
    },

    /*
      高级查询
     */
    advanceSearch(){
      this.$router.push({
        name:'AdminResult',
        params:{
          select:'advance',
          key:JSON.stringify(this.searchForm)
        }
      }).then(()=>{
        this.reload()
      }).catch(failRes=>{
        this.reload()
      })
    },


    /*
      重置表单
     */
    clear(){
      this.searchForm={
        direction:'',
        searchItem:[
          {value:'',select:'title'},
        ],
        begin:'',
        end:''
      }
    }
  }
}
</script>

<style scoped>

/deep/.input-with-select .el-input-group__prepend {
  background-color: #fff;
}

/deep/.el-select .el-input {
  width: 105px;
}
</style>
